<template>
  <el-container>
    <el-header>
      <div class="line"></div>
      <div class="tab-top"
           style="width:100%;height:0.6rem;">
        <div class="header-logo">
          <div class="icon"><i class="el-icon-s-grid"></i></div>
          <div class="logo">数据可视化工具</div>
        </div>
        <el-menu class="el-menu-demo"
                 mode="horizontal"
                 text-color="#fff"
                 background-color="#3689ff"
                 active-text-color="#ffd04b"
                 style="margin-left:10rem;">
          <el-menu-item index="1-1"
                        v-if="!connect"
                        text-color="#fff"
                        @click="toggleConnect">连接数据库</el-menu-item>
          <el-menu-item index="1-1"
                        text-color="#fff"
                        v-else
                        @click="toggleConnect">断开数据库</el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              {{name}}
            </template>
            <el-menu-item index="2-1"
                          @click="changePd">个人中心</el-menu-item>
            <el-menu-item index="2-2"
                          @click="select('2-2')">退出登录</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </el-header>
    <el-main>
      <el-menu default-active="1"
               class="el-menu-vertical-demo"
               text-color="#fff"
               background-color="#3689ff"
               active-text-color="#ffd04b">
        <el-menu-item index="1"
                      @click="select(1)">
          <i class="el-icon-circle-plus-outline"></i>
          <p slot="title">新建视图</p>
        </el-menu-item>
        <el-menu-item index="2"
                      @click="select(2)">
          <i class="el-icon-circle-plus-outline"></i>
          <p slot="title">新建图表</p>
        </el-menu-item>
        <el-menu-item index="3"
                      @click="select(3)">
          <i class="el-icon-time"></i>
          <p slot="title">历史图表</p>
        </el-menu-item>
      </el-menu>
      <div class="content">
        <view-content ref="view"
                      v-show="selectId==1"></view-content>
        <chart-content ref="chart"
                       v-show="selectId==2"></chart-content>
        <history-chart v-if="selectId==3"></history-chart>
        <el-dialog title="连接数据库"
                   :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item>
              <el-dropdown style="margin-left:-0.3rem;">
                <el-button type="primary"
                           size="small">
                  历史连接<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="form.connectList.length==0">暂无数据</el-dropdown-item>
                  <el-dropdown-item v-for="item in form.connectList"
                                    @click.native="setNewForm(item)"
                                    :key="item.dbHost+item.dbPort+item.userName">{{item.dbHost}}:{{item.dbPort}}</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-checkbox v-model="form.isSaveConnect"
                           style="margin-left:4.2rem">保存当前连接</el-checkbox>
            </el-form-item>
            <el-form-item label="主机或IP地址"
                          :label-width="formLabelWidth"
                          style="margin-left:0.5rem;">
              <el-input v-model="form.dbhost"
                        style="width:3rem;margin-left:-1rem;"
                        autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="端口"
                          :label-width="formLabelWidth"
                          style="margin-left:0.5rem;">
              <el-input v-model="form.dbport"
                        autocomplete="off"
                        style="width:3rem;margin-left:-1rem;"></el-input>
            </el-form-item>
            <el-form-item label="数据库"
                          :label-width="formLabelWidth"
                          style="margin-left:0.5rem;">
              <el-input v-model="form.db"
                        autocomplete="off"
                        style="width:3rem;margin-left:-1rem;"></el-input>
            </el-form-item>
            <el-form-item label="用户名"
                          :label-width="formLabelWidth"
                          style="margin-left:0.5rem;">
              <el-input v-model="form.dbuser"
                        autocomplete="off"
                        style="width:3rem;margin-left:-1rem;"></el-input>
            </el-form-item>
            <el-form-item label="密码"
                          :label-width="formLabelWidth"
                          style="margin-left:0.5rem;">
              <el-input v-model="form.dbpassword"
                        autocomplete="off"
                        show-password
                        style="width:3rem;margin-left:-1rem;"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer"
               class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"
                       @click="connectDatabase">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import ViewContent from './ViewLevel/ViewLevel'
import ChartContent from './ChartLevel/ChartLevel'
import HistoryChart from './HistoryChart/HistoryChart'
export default {
  name: 'Home',
  mounted () {
    this.getConnectList();
  },
  data () {
    return {
      name: '',
      selectId: 1,
      connect: false,
      dialogFormVisible: false,
      form: {
        // dbhost: 'localhost',
        // dbport: 3306,
        // db: 'gradesmanage',
        // dbuser: 'root',
        // dbpassword: 'ming',
        dbhost: '',
        dbport: '',
        db: '',
        dbuser: '',
        dbpassword: '',
        connectList: [],
        isSaveConnect: false
      },
      formLabelWidth: '100px'
    }
  },

  beforeMount () {
    this.name = sessionStorage.getItem('name');
    sessionStorage.setItem('isconnect', false);
  },
  components: {
    ViewContent,
    ChartContent,
    HistoryChart
  },
  methods: {
    select (id) {
      let self = this
      self.selectId = id
      console.log(id);
      switch (id) {
        case 1: self.$refs.view.$emit('connectUpdate', true, self.form); break;
        case 2: self.$refs.chart.$emit('connectUpdate', true, self.form); break;
      }
    },
    toggleConnect () {
      var self = this
      if (self.connect == false) {
        self.dialogFormVisible = true
      }
      else {
        self.$ajax({
          method: 'GET',
          url: '/view/disconnect/',
        }).then(function (response) {
          let data = JSON.parse(response.data.data)
          if (data.flag) {
            self.$message({ message: data.message, type: 'success' });
            self.connect = false
            sessionStorage.setItem('currentdb', '')
            self.$refs.view.$emit('connectUpdate', false);
            self.$refs.chart.$emit('connectUpdate', false);
          }
          else self.$message.error(data.message);
        }).catch(function (err) {
          self.$message.error(err);
        })
      }
      // this.connect = this.connect === true ? false : true
    },
    connectDatabase () {
      var self = this
      let flag = 0
      console.log(self.form.connectList.filter(item => item.dbHost = self.form.dbhost && item.dbPort == self.form.dbport && item.userName == self.name))
      if (!self.form.isSaveConnect) flag = 0
      else if (self.form.connectList.filter(item => item.dbHost = self.form.dbhost && item.dbPort == self.form.dbport && item.userName == self.name).length == 1)
        flag = 1;     //update
      else flag = 2; //insert
      console.log(flag)
      self.$ajax({
        method: 'POST',
        url: '/view/connect/',
        dataType: 'json',
        data: {
          'host': self.form.dbhost,
          'port': self.form.dbport,
          'database': self.form.db,
          'user': self.form.dbuser,
          'password': self.form.dbpassword,
          'flag': flag,
          'userName': self.name
        }
      }).then(function (response) {
        let data = JSON.parse(response.data.data)
        console.log(data)
        if (data.flag) {
          self.$message({ message: data.message, type: 'success' });
          self.connect = true
          self.dialogFormVisible = false
          sessionStorage.setItem('isconnect', true)
          sessionStorage.setItem('currentdb', self.form.db)
          self.$refs.view.$emit('connectUpdate', true, self.form);
          self.$refs.chart.$emit('connectUpdate', true, self.form);
          self.getConnectList();
        }
        else self.$message.error(data.message);
      }).catch(function (err) {
        self.$message.error(err)
      })
    },
    getConnectList () {
      let self = this
      self.$ajax({
        method: 'POST',
        url: '/view/getConnectList/',
        dataType: 'json',
        data: {
          'userName': self.name
        }
      }).then(function (response) {
        console.log(response.data.data)
        self.form.connectList = response.data.data
      }).catch(function (err) {
        console.log(err)
      })
    },
    setNewForm (form) {
      let self = this
      self.form.dbhost = form.dbHost
      self.form.dbport = form.dbPort
      self.form.db = form.dbName
      self.form.dbuser = form.dbUser
      self.form.dbpassword = form.dbPassword
    },
    changePd () {
      window.location.href = "./changePd"
    }
  }
}
</script>
<style lang="stylus">
.el-container
  width 100%
  height 7.56rem
  overflow hidden
  .el-header
    color #fff
    background #3689ff
    border-bottom solid 1px #e6e6e6
    padding 0
    padding-bottom 0.01rem
    .header-logo
      position absolute
      height 0.6rem
      line-height 0.6rem
      font-size 0.2rem
      color #fff
      .icon
        display inline-block
        width 0.6rem
        margin-right 0.2rem
        border-right solid 1px #e6e6e6
        font-size 0.22rem
        background #3689ff
        color #fff
      .logo
        display inline-block
  .el-main
    position relative
    width 100%
    height 7.4rem
    padding 0 0 0 0.6rem
    overflow hidden
    .el-menu-vertical-demo
      position absolute
      left 0
      width 0.6rem
      height 100%
      .el-menu-item
        width 0.6rem
        height 0.8rem
        line-height 0.2rem
        padding-left 0 !important
        border-top solid 1px #e6e6e6
        border-bottom solid 1px #e6e6e6
        i
          width 0.6rem
          margin-top 0.2rem
          font-size 0.22rem
          color #fff
        p
          width 0.6rem
          margin-top 0.05rem
          text-align center
          font-size 0.12rem
    .content
      width 100%
      height 100%
      background yellow
.is-active i
  color #ffd04b !important
.el-icon-user-solid, .el-submenu__icon-arrow
  color #fff !important
</style>